<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>Swiper插件</title>
    <link rel="stylesheet" href="../lib/swiper/swiper.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .swiper-container {
            width: 600px;
            /* height: 300px; */
        }

        img {
            width: 100%;
        }

        .dot {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 8px;
            background-color: #f00;
            border-radius: 50%;
        }

        .act {
            background-color: #00f;
        }
    </style>
</head>

<body>
    <!-- 
        1. 引入 swiper.css/swiper.js 两个依赖文件
        2. 引入 swiper 的页面结构
            .swiper-container 最外层的容器结构
            .swiper-wrapper   运动元素
            .swiper-slide     展示的轮播版面
            swiper 默认是通过鼠标拖拽执行轮播转换
            如果需要滚动条：.swiper-scrollbar 来添加滚动条
            如果需要导航键：.swiper-button-prev/next 来添加前后的导航键
            如果需要分页器：.swiper-pagination 来添加前后的导航键
        3. 初始化 Swiper 实例
    -->
   
    <div class="swiper-container swiper-1">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../lib/image/bom/m1.jpg"></div>
            <div class="swiper-slide"><img src="../lib/image/bom/m2.jpg"></div>
            <div class="swiper-slide"><img src="../lib/image/bom/m3.jpg"></div>
            <div class="swiper-slide"><img src="../lib/image/bom/m4.jpg"></div>
            <div class="swiper-slide"><img src="../lib/image/bom/m5.jpg"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <div class="box swiper-2">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../lib/image/bom/m1.jpg"></div>
            <div class="swiper-slide"><img src="../lib/image/bom/m2.jpg"></div>
            <div class="swiper-slide"><img src="../lib/image/bom/m3.jpg"></div>
            <div class="swiper-slide"><img src="../lib/image/bom/m4.jpg"></div>
            <div class="swiper-slide"><img src="../lib/image/bom/m5.jpg"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script src="../lib/swiper/swiper.min.js"></script>
    <script type="text/javascript">
        // Swiper 实例化，通过 new Swiper(激活的swiper容器, { 配置项 }) 
        // Swiper 使用的 jQ 选择器
        new Swiper(".swiper-1", {
            // loop: true, // 是否开启无缝轮播
            navigation: { // 前进后退按钮设置
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                // disabledClass: "self-disabled", // 如果不是loop循环，到极值时，添加的箭头不可用类名
            },
            pagination: { // 分页器设置
                el: '.swiper-pagination',
                clickable: true,
                bulletClass: "dot",
                bulletActiveClass: "act",
                renderBullet: function(index, className){
                    return `<span class="dot">${index+1}</span>`;
                }
            },
            // autoplay: true,//等同于以下设置
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false, // 非loop循环下是否停止在最后一张
                disableOnInteraction: false, // 用户操作后是否重新开启自动轮播
            },
        });
    </script>
</body>

</html>